Suggested: ReactJS Tutorial For Beginners - User Registration Form
If playback doesn't begin shortly, try restarting your device.
5 seconds
Creating Button Element
1:39:31
18:00
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site.
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKs...
Access Source Code Here (Scroll to bottom of page)
https://www.codavilla.com/posts/react...
Timeline
0:00 Website Design we're building
4:26 Creating React Project
9:18 Creating our Project Files
10:44 Creating Navbar
16:10 Styling Navbar
46:51 Creating Sidebar/Dropdown Menu
48:15 Styling Sidebar
1:07:22 Creating Home Page
1:14:21 Creating Hero Section
1:16:55 Styling Hero Section
1:32:50 Creating Button Element
1:43:12 Creating Reusable Info Section
1:47:22 Styling Info Section
2:06:08 Adding Data to Info Section
2:18:43 Adding Smooth Scroll to Info Section Buttons
2:33:18 Creating Services Section
2:37:06 Styling Services Section
2:47:53 Creating Sign In Page
2:48:39 Adding React Routes to Website
2:52:08 Creating Footer
2:59:15 Styling Footer
3:20:18 Changing Navbar background on scroll
3:24:52 Adding React Scroll to our site
3:34:20 Creating Sign In Component
3:38:52 Scroll to Top on Page/Route Change
Host your React Website for Free
https://youtu.be/C0CNIhRzhYg
VS Code Theme I use
https://youtu.be/6etaWaiMkvM
React Website with Styled Components using only React Router
https://youtu.be/iP_HqoCuRI0
Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site.
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKs...
Access Source Code Here (Scroll to bottom of page)
https://www.codavilla.com/posts/react...
Timeline
0:00 Website Design we're building
4:26 Creating React Project
9:18 Creating our Project Files
10:44 Creating Navbar
16:10 Styling Navbar
46:51 Creating Sidebar/Dropdown Menu
48:15 Styling Sidebar
1:07:22 Creating Home Page
1:14:21 Creating Hero Section
1:16:55 Styling Hero Section
1:32:50 Creating Button Element
1:43:12 Creating Reusable Info Section
1:47:22 Styling Info Section
2:06:08 Adding Data to Info Section
2:18:43 Adding Smooth Scroll to Info Section Buttons
2:33:18 Creating Services Section
2:37:06 Styling Services Section
2:47:53 Creating Sign In Page
2:48:39 Adding React Routes to Website
2:52:08 Creating Footer
2:59:15 Styling Footer
3:20:18 Changing Navbar background on scroll
3:24:52 Adding React Scroll to our site
3:34:20 Creating Sign In Component
3:38:52 Scroll to Top on Page/Route Change
Host your React Website for Free
https://youtu.be/C0CNIhRzhYg
VS Code Theme I use
https://youtu.be/6etaWaiMkvM
React Website with Styled Components using only React Router
https://youtu.be/iP_HqoCuRI0
That was great! I've never used styled components before and all the repetition and patterns you've demonstrated truly helped me build a strong foundation! Thank you!
Bro I'm only like halfway through but this tutorial is clicking so much more for me than other, much longer and more in depth tutorials. I think maybe it's the order you are going through, combined with the pace. So relieved, finally this React stuff is starting to click in my boomer object oriented brain. Thank you.
If you're having any issues with margins, instead of removing the App.css file, delete everything inside and replace it with *{margin: 0px; padding: 0px}. This will remove all default margins, and give you more freedom to work.
Awesome tutorial! Fellow developers, in case you want to add extra pages like a signup you need to add a few thing extra props onto your styled-component.
Example: <SignUpText as="a" href="/signup>Enter Text Here></SignUpText>
You can have your styled-components act as something else in this case we added "as" and said to act like an a tag.
If you plan to deploy to Netlify, continue reading...
You might receive a 404 error when navigating to other pages to fix this you need create a file called "netlify.toml" and add the following:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Just redeploy and you will be all good to go!
Hi Brian, your tutorials and design is awesome! Have one question, when you change navbar color with the addEventListener on scroll, shouldnt there be a cleanup function with that listener? And hows performance of that if you trigger that function on scroll? Any option for debounce? Thanks!
Unlike other channels, you not only teach React, but also focus on the design part of it which is immensely helpful. Thanks a ton, expecting more amazing content :D
Really amazing work man, I recently created my first mern project to show employers and next was thinking about making portfolio page, this video is inspiring, might create something similar, looking forward to see how you solved some parts! Cheers
Your React using Styled Components have been a life saver. Hoping you do an ecommerce type of website soon! Would love to see what you do with that style